<template >
  <div class="content-body">
    <div class="header">
      <div class="header_data">
        <span> {{ timeDate | formatDate }}</span>
      </div>
      <div class="header_cenner">
        <img src="../assets/logo/logo.png" /> <span>城市地下谛听系统</span>
      </div>

      <div class="header_right">
        <span>用户:{{ nickName }}</span>
      </div>
      <div class="header_right3">
        <el-badge :value="onLineCount()">
          <span>设备离线</span>
        </el-badge>

      </div>
      <div class="header_right4" @click="goCard">
        <el-badge :value="warnCount">
          <span>物联网卡预警</span>
        </el-badge>

      </div>
      <div class="header_right1" @click="goAdmin">
        <img src="../assets/img/tool.png" />
      </div>
    </div>

    <div class="content_map">
      <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :double-click-zoom="true" class="map"
        @ready="handler">
        <bm-control>
          <div class="cursors stop" @click="stop" title="切换 "><i class="el-icon-s-operation" style="font-size: 32px;"></i></div>
        </bm-control>

        <transition name="el-zoom-in-center">
          <bm-control v-if="active1" class="switch">
            <div class="switch-left">
              <div class="switch-title-left1">
                <span>数据统计</span>
              </div>
              <div class="switch-body">
                <div class="sjtj">
                  <div class="sjtjBg">
                    <span>{{ zdEquipmentList.length + wdEquipmentList.length }}</span>

                  </div>
                  <span>设备总数</span>

                </div>
                <div class="sjtj">
                  <div class="sjtjBg">
                    <span>{{ zdEquipmentList.length }}</span>
                  </div>
                  <span>振动台站</span>

                </div>
                <div class="sjtj">
                  <div class="sjtjBg">
                    <span>{{ wdEquipmentList.length }}</span>
                  </div>
                  <span>多点位测温</span>

                </div>
              </div>
            </div>
          </bm-control>
        </transition>

        <el-collapse-transition>
          <bm-control v-if="active1" class="switch1">
            <div class="switch1-left">
              <div class="switch1-title-left1">
                <span>振动任务统计</span>
              </div>
              <div class="switch1-body">
                <Pie :id="'zd'" :chart-data="zdtj"></Pie>
              </div>
            </div>
          </bm-control>
        </el-collapse-transition>

        <el-collapse-transition>
          <bm-control v-if="active1" class="switch3">
            <div class="switch3-left">
              <div class="switch3-title-left1">
                <span>温度任务统计</span>
              </div>

              <div class="switch1-body">
                <Pie :id="'wd'" :chart-data="wdtj" />
              </div>

            </div>
          </bm-control>
        </el-collapse-transition>
        <el-collapse-transition>
          <bm-control v-if="!active1" class="switch11">
            <div class="switch11_title">
              <span>设备列表</span>
            </div>

            <div class="switch11_body">

              <div class="switch11_body_bbb" @click="onclick(1)"  :class="{myactive:actives==1}">
                振动台站
              </div>

              <div class="switch11_body_bbb" @click="onclick(2)"  :class="{myactive:actives==2}">
                多点测温
              </div>

              <div class="switch11_body_aaa">

                <ul v-if="myShow">
                  <li v-for="item in equipmentList" v-if="item.equipmentType == 1" @click="toLocation(item)" class="witch11_body_aaa_hover">
                    <span style="width: 160px;">
                    <i class="el-icon-icon" style=" text-align:center;color: #00FFF4;font-size: 18px; "></i> {{ item.equipmentName }}</span>
                    <span> <i class="el-icon-WLANaccess" style=" text-align:center; font-size: 18px;" :style="'color:'+(item.onLineStatus == '1'?'red':'#00FFF4')+';'"></i> {{item.onLineStatus == '1'?'离线':'在线'}}</span>
                    <img style="width: 20px" src="../assets/img/dingwei1.png" alt="">
                  </li>
                  <!-- <li v-if="">
                    <span> 暂无数据</span>
                  </li> -->
                </ul>

                <ul v-if="!myShow">
                  <li v-for="item in equipmentList" v-if="item.equipmentType == 2" @click="toLocation(item)"  class="witch11_body_aaa_hover">
                    <span style="width: 160px;">
                    <i class="el-icon-icon" style=" text-align:center;color: #00FFF4;font-size: 18px; "></i> {{ item.equipmentName }}</span>
                    <span> <i class="el-icon-WLANaccess" style=" text-align:center; font-size: 18px;" :style="'color:'+(item.onLineStatus == '1'?'red':'#00FFF4')+';'"></i> {{item.onLineStatus == '1'?'离线':'在线'}}</span>
                    <img style="width: 20px" src="../assets/img/dingwei1.png" alt="">
                  </li>
                  <!-- 如果没有数据 显示暂无数据 -->
                  <!-- <li v-if="">
                    <span> 暂无数据</span>
                  </li> -->
                </ul>

              </div>
              <div class="switch11_foot"></div>
            </div>

          </bm-control>

        </el-collapse-transition>


        <el-collapse-transition>
          <bm-control style="margin-right:3%" class="switch2">
            <div class="switch2-right">
              <div class="switch2_t" style="display: inline-block; width: 100%;position: relative;">

                <div class="switch2-title">
                  <span>
                    多点位测温
                  </span>
                </div>
                <el-select @change="gyroscopeCodeChange" v-model="gyroscopeCode" placeholder="请选择"
                  style="position:absolute; top: 30.3%;right: 11px; width: 150px;">
                  <el-option v-for="item in wdEquipmentList" :key="item.gyroscopeCode" :label="item.equipmentName"
                    :value="item.gyroscopeCode">
                  </el-option>
                </el-select>
              </div>
              <div class="switch2-body">
                <!--                <line-chart-two></line-chart-two>-->

               <line-chart-four v-if="wdFlag" :check-list="[]" :chart-data="wdChartData"></line-chart-four>

              </div>
            </div>
          </bm-control>
        </el-collapse-transition>

        <el-collapse-transition>

          <bm-control class="switch4">
            <div class="switch4-left">
              <div class="switch4-title-left1">
                <span>陀螺仪</span>
              </div>

              <div class="switch4-body">
                <line-chart-one :id="'tly'" :chart-data="tlyData"></line-chart-one>
              </div>

            </div>
          </bm-control>
        </el-collapse-transition>

        <el-collapse-transition>

          <bm-control class="switch5">
            <div class="switch4-left">
              <div class="switch4-title-left1">
                <span>温度变化</span>
              </div>

              <div class="switch4-body">
                <line-pie :id="'wdbh'" :chart-data="wdbhData" />
              </div>

            </div>
          </bm-control>
        </el-collapse-transition>
        <bml-marker-clusterer :maxZoom="13" :averageCenter="true">
          <bm-marker v-for=" equipment in equipmentList " :key="equipment.sn"
            v-if="equipment.equipmentType == '1' && equipment.onLineStatus == 0"
            :position="{ lng: equipment.lon, lat: equipment.lat }" :dragging="false" @click="handleClick(equipment)" :icon="{
              url: require('../assets/img/zd_online.png'),
              size: { width: 29, height: 45 },
            }" :title="equipment.equipmentName">
          </bm-marker>
          <bm-marker v-for=" equipment in equipmentList " :key="equipment.sn"
            v-if="equipment.equipmentType == '1' && equipment.onLineStatus == 1"
            :position="{ lng: equipment.lon, lat: equipment.lat }" :dragging="false" @click="handleClick(equipment)" :icon="{
              url: require('../assets/img/zd_offline.png'),
              size: { width: 29, height: 45 },
            }" :title="equipment.equipmentName">
          </bm-marker>
          <bm-marker v-for=" equipment in equipmentList " :key="equipment.sn"
            v-if="equipment.equipmentType == '2' && equipment.onLineStatus == 0"
            :position="{ lng: equipment.lon, lat: equipment.lat }" :dragging="false" @click="handleOneClick(equipment)" :icon="{
              url: require('../assets/img/wd_online.png'),
              size: { width: 18, height: 50 },
            }" :title="equipment.equipmentName">
          </bm-marker>
          <bm-marker v-for=" equipment in equipmentList " :key="equipment.sn"
            v-if="equipment.equipmentType == '2' && equipment.onLineStatus == 1"
            :position="{ lng: equipment.lon, lat: equipment.lat }" :dragging="false" @click="handleOneClick(equipment)" :icon="{
              url: require('../assets/img/wd_offline.png'),
              size: { width: 18, height: 50 },
            }" :title="equipment.equipmentName">
          </bm-marker>
        </bml-marker-clusterer>

        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      </baidu-map>
      <dialog-component :data="currentEquipment" :detail-visible="visible" @close="close"></dialog-component>
      <dialog-component-one :data="currentEquipment" :detail-visibles="visibles" @close="close"></dialog-component-one>
    </div>
  </div>
</template>

<script>
import custon from '../assets/json/custom_map_config.json';
import dialogComponent from "../components/DialogComponent";
import { getEquipmentInfo, getEquipmentList } from "../api/vibration/vibration";
import LinePie from './LineChart/LinePie.vue';
import Pie from './LineChart/Pie.vue';
import PieOne from './LineChart/PieOne.vue'
import LineChartOne from "./LineChart/LineChartOne.vue"
import { mapState } from 'vuex'
import { gyroscopeChange, taskCount, temperatureChange } from "../api/baseinfo/collectionTask";
import DialogComponentOne from "./LineChart/DialogComponentOne.vue";
import LineChartTwo from './LineChart/LineChartTwo.vue';
import LineChartFour from './LineChart/LineChartFour.vue';
import { getTemperatureChartDataIndex } from "../api/baseinfo/moreTemperatureData";
import { warnCount } from "@/api/baseinfo/card";
import { BmlMarkerClusterer } from 'vue-baidu-map';
import { set } from 'nprogress';

let formatNum = function (num) {
  return num < 10 ? "0" + num : num;
};
export default {
  components: {
    dialogComponent,
    LinePie,
    Pie,
    PieOne,
    LineChartOne,
    DialogComponentOne,
    LineChartTwo,
    LineChartFour,
    BmlMarkerClusterer
  },

  computed: {
    ...mapState({
      nickName: state => state.user.nickName,
    }),
  },
  data() {
    return {
      actives: 1,
      myShow: 1,
      // 切换
      switchMap:2,
      g: '',
      timeDate: new Date(),
      map: null,
      active: false,
      center: { lng: 0, lat: 0 },
      zoom: 14,
      show: false,
      active1: true,//控件的开关
      visible: false,
      visibles: false,
      styleJson: custon,
      equipmentList: [],
      currentEquipment: {},
      currentEquipmentSn: null,
      times: null, //设备列表刷新定时器
      timer: null, //设备信息刷新定时器
      equipmentCode: 'AA00250001',
      timeTem: null,//定时器刷新温度
      gyroscopeCode: null,
      wdChartData: {},
      wdFlag: false,
      zdtj: [],
      wdtj: [],
      warnCount: 0,
      wdbhData: {
        x: [],
        y: []
      },//温度变化折线图
      tlyData: {
        x: [],
        y: [],
        z: []
      },
      i: 10,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      zdEquipmentList: [],
      wdEquipmentList: [],

    };
  },

  created() {
    if (this.timer) clearInterval(this.timer);
    if (this.times) clearInterval(this.times);
    this.handGetEquipmentList();
    this.handleTaskCount();
    this.handleWarnCount();
    var that = this;
    that.equipmentCode = this.equipmentCode;
    this.handleChangeTask(that.equipmentCode);
    if (this.timeTem) clearInterval(this.timeTem);
    this.timeTem = setInterval(() => {
      this.handleChangeTask(that.equipmentCode);
    }, 1000 * 120);
  },
  methods: {

    onclick(e){
      if(e==1){
        this.myShow=true
        this.actives=1
      }else if(e==2){
        this.myShow=false
        this.actives=2
      }

    },
    stop() {
      this.active1 = !this.active1
    },
    toLocation(equipment) {
      this.center = {lng: equipment.lon, lat: equipment.lat};
      this.zoom = 16;
    },
    //获取设备列表及采集状态
    handGetEquipmentList() {
      getEquipmentList().then(res => {
        this.equipmentList = res.data;
        const path = [];
        let that = this;
        let index = 1;
        this.equipmentList.forEach((item, key) => {
          path.push({ lng: item.lon, lat: item.lat })
          if (item.equipmentType == '1') {
            that.zdEquipmentList.push(item);
          } else if (item.equipmentType == '2') {
            that.wdEquipmentList.push(item);
            if (index) {
              this.gyroscopeCode = item.gyroscopeCode;
              index = 0;
              getTemperatureChartDataIndex({equipmentCode:this.gyroscopeCode,type:1}).then(res => {
                this.wdChartData = res.chartData;
                this.wdFlag = true;
              })
            }
          }
        })
        //合理化布局所有点
        if (this.map) {
          let view = this.map.getViewport(eval(path))
          this.center = view.center
          this.zoom = view.zoom
        }

      })
    },
    //获取设备信息
    handleGetEquipmentInfo(sn) {
      getEquipmentInfo({ equipmentSn: sn }).then(res => {
        this.currentEquipment = res.data;
      })
    },

    close() {
      this.visible = false;
      this.visibles = false;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },

    handler({ BMap, map }) {
      console.log(BMap, map);
      this.map = map;
      this.center.lng = 117.124509;
      this.center.lat = 36.688143;
      this.zoom = 14;
      map.setMapStyleV2({
        styleJson: this.styleJson,

      });
    },
    goAdmin() {
      this.$router.push({ path: "/admin" }).catch(() => { });
    },
    goCard() {
      this.$router.push({ path: "/baseinfo/card" }).catch(() => { });
    },

    handleWarnCount() {
      warnCount().then(res => {
        this.warnCount = res.data
      })
    },
    onLineCount() {
      let count = 0;
      this.equipmentList.forEach((item, index) => {
        if (item.onLineStatus == 1) {
          count++;
        }
      })
      return count;
    },
    handleOneClick(equipment) {
      this.currentEquipment = equipment;
      this.visibles = true;
    },

    handleClick(data) {
      this.currentEquipmentSn = data.sn;
      getEquipmentInfo({ equipmentSn: this.currentEquipmentSn }).then(res => {
        this.currentEquipment = res.data;
        this.visible = true;

      })
      this.timer = setInterval(() => {
        this.handleGetEquipmentInfo(this.currentEquipmentSn);
      }, 1000 * 10);
    },
    //左侧任务统计图表
    handleTaskCount() {
      taskCount().then(res => {
        const zd = res.zd
        zd.forEach(item => {
          let aa = {};
          aa.name = item.equipmentName;
          aa.y = item.taskCount;
          this.zdtj.push(aa)
        })
        const wd = res.wd
        wd.forEach(item => {
          let ab = {}
          ab.name = item.equipmentName;
          ab.y = item.taskCount;
          this.wdtj.push(ab)
        })
      })
    },
    //右侧统计图表
    handleChangeTask(equipmentCode) {
      console.log('定时得到编号', equipmentCode)
      //陀螺仪数据
      gyroscopeChange({ gyroscopeCode: equipmentCode }).then(res => {
        const tly = res.tly;
        let x = [];
        let y = [];
        let z = [];
        tly.forEach(item => {
          x.push(item.dataX)
          y.push(item.dataY);
          z.push(item.dataZ);
        })
        this.tlyData.x = x;
        this.tlyData.y = y;
        this.tlyData.z = z;
      })
      this.wdbhData.x = [];
      this.wdbhData.y = [];
      //温度数据
      temperatureChange({ equipmentCode: equipmentCode }).then(res => {
        const wdbh = res.wdbh;
        let x = [];
        let y = [];
        wdbh.forEach(item => {
          x.push(item.dataTimeStr)
          y.push(item.temperature);
        })
        this.wdbhData.x = x;
        this.wdbhData.y = y;
      })
    },
    //多点位测温设备切换
    gyroscopeCodeChange() {
      this.wdFlag = false;
      getTemperatureChartDataIndex({equipmentCode:this.gyroscopeCode,type:1}).then(res => {
        this.wdChartData = res.chartData;
        this.wdFlag = true;
      })
    }
  },
  filters: {
    // 实时-时间-数据转换
    formatDate(value) {
      let year = value.getFullYear();
      let month = formatNum(value.getMonth() + 1);
      let day = formatNum(value.getDate());
      let hour = formatNum(value.getHours());
      let min = formatNum(value.getMinutes());
      let sec = formatNum(value.getSeconds());
      return (
        year + "年" + month + "月" + day + "日" + hour + ":" + min + ":" + sec
      );
    },
  },

  mounted() {
    // 实时-时间-计时
    let that = this;
    setInterval(function () {
      that.timeDate = new Date();
    }, 1000);
  },

  // 实时-时间
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
    if (this.times) clearInterval(this.times);
    if (this.timeTem) clearInterval(this.timeTem);
    this.wdbhData.x = [];
    this.wdbhData.y = [];
  }
};
</script>

<style>
.cursors {
  cursor: pointer;
  /*鼠标变小手*/

}

.content-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(#02060E, #0A2044);
}

.header {
  height: 62px;
  width: 100%;
  background: url("../assets/img/bg_head1.png") no-repeat;
  overflow: hidden;
  background-size: 100% 100%;
  display: block;
  position: relative;
}

.stop {
  margin-left: 10px;
  margin-top: 10px;
  background: transparent;
  color: #2ebadd;
  box-shadow: 0px 0px 6px #0783FA;
  border-radius: 2px;
}
/* 自定义百度地图切换 */
.switch22{
 margin-top: 1%;
margin-left: 95%;
 width: 80px;
 height: 20px;
 background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  backdrop-filter: blur(2px);
  font-size: 10px;
  line-height: 20px;
  display: inline-block;
}
.switch22div1{
  float: left;
  width: 50%;
}
.switch22div1:hover{
  cursor: pointer;

}

.switch22div2{
  float: left;
  width: 50%;
}
.switch22div2:hover{
  cursor: pointer;

}
.thisactive{
  background: rgb(0, 4, 23, 0.5);
}
/* 切换设备列表 */
.switch11 {
  margin-top: 3.6%;
  margin-left: 2%;
  width: 20%;
  height: auto;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;
  overflow: hidden;
  color: #fff;
  text-align: left;
  position: relative;
  float: left;
  backdrop-filter: blur(2px);
  /*毛玻璃属性*/
}

.switch11_title {
  margin-top: 3.3%;
  margin-left: 5.47%;
  width: 41%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title-left.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
}

.switch11_title span {
  margin-left: 3%;
}

.switch11_body {
  padding: 3px 10px;
  /* height: 90%; */
  /* height: auto; */

  /* height: auto; */
  /* max-height: 80%; */
  /* box-sizing: border-box; */
  /* overflow-y: auto; */




}

.switch11_body_bbb {
  width: 80px;
  height: 24px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
  color: #84d4ec;
  font-weight: 500;
  background-color: #32373f;
  float: left;
  cursor: pointer;
  margin: 10px 0 0 18px;
  border: 1px solid #65acc2;
}
.myactive{
  color: #01c2ff ;
  border: 1px solid #01c2ff ;
  background-color: #00091a ;
}

.switch11_body .switch11_body_aaa {
  margin-top: 50px;


  width: 100%;


}
.switch11_body_aaa ul{
  list-style: none;

  /* overflow: scroll;  */
  max-height:600px ;
  overflow-y: auto;


}
.switch11_body_aaa ul li{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: #d1e8f0;
  height: 30px;
  border-bottom: 1px solid #eee;
  cursor: pointer;

}
.switch11_body_aaa ul li:hover{
    background: rgba(132, 177, 197, 0.5);;

}
.switch11_foot{
  height: 15px;
}
/* 数据统计 */
.switch {
  margin-top: 3.6%;
  margin-left: 2%;
  width: 19.06%;
  height: 20.43%;
  line-height: 40px;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;
  /* background: transparent; */
  overflow: hidden;
  color: #fff;
  text-align: left;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属性*/
}

.switch-title-left1 {
  margin-top: 3.3%;
  margin-left: 8.47%;
  width: 41%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title-left.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
}

.switch-title-left1 span {
  margin-left: 3%;
}

.switch-body {
  margin-top: 3%;
  padding: 0 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;


}

.sjtj {
  height: 130px;
  text-align: center;
  color: #fff;
  font-size: 10px;
}

.sjtjBg {
  height: 80px;
  width: 60px;
  background: url("../assets/img/border-cenner.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 28px;
  line-height: 80px;
  color: #00C0FF;
  filter: opacity(0.6);

}


/* 饼状图 */
.switch1 {
  margin-top: 13.8%;
  margin-left: 2%;
  width: 19.06%;
  height: 28.43%;
  line-height: 40px;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;
  /* background: transparent; */
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属性*/

}

.switch1-title-left1 {
  margin-top: 3.3%;
  margin-left: 8.47%;
  width: 50%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title2-left.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
}

.switch1-title-left1 span {
  margin-left: 3%;

}


/* 3d饼状图 */
.switch3 {
  margin-top: 28.8%;
  margin-left: 2%;
  width: 19.06%;
  height: 28.43%;
  line-height: 40px;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;

  /* background: transparent; */
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属*/
}

.switch3-title-left1 {
  margin-top: 3.3%;
  margin-left: 8.47%;
  width: 50%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title2-left.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
}

.switch3-title-left1 span {
  margin-left: 3%;

}

.switch4 {
  margin-top: 17.3%;
  margin-left: 80%;
  width: 19.06%;
  height: 28.43%;
  line-height: 40px;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;

  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属*/
}

.switch5 {
  margin-top: 30.8%;
  margin-left: 80%;
  width: 19.06%;
  height: 28.43%;
  line-height: 40px;
  background: rgb(0, 4, 23, 0.5);
  box-shadow: 0px 0px 6px #0783FA;
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属*/
}

.switch4-title-left1 {
  margin-top: 3.3%;
  margin-left: 8.47%;
  width: 41%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title-right.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
}

.switch4-title-left1 span {
  margin-left: 44.74%;

}

.switch2 {
  margin-top: 50px;
  margin-left: 80%;
  width: 19.06%;
  height: 28.43;
  background: rgb(0, 4, 23, 0.9);
  box-shadow: 0px 0px 6px #0783FA;

  overflow: hidden;
  color: #fff;
  text-align: center;
  position: relative;
  float: left;
  transition: 2s;
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 1s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  backdrop-filter: blur(2px);
  /*毛玻璃属性*/
}

.switch2-title {
  margin-top: 3.3%;
  margin-left: 8.47%;
  width: 45%;
  color: #00FFF4;
  background: url("../assets/img/index/switch-title-right.png")no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: block;
  font-size: 18px;
  line-height: 22px;
}

.switch2-title span {
  margin-left: 44.74%;
}

.switch2 .switch2_t .el-input__inner {
  background: rgb(0, 4, 23, 0.5);
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #00FFF4;
  display: inline-block;
  font-size: inherit;
  height: 24px;
  line-height: 24px;
  outline: none;
  padding: 0 10px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  -webkit-appearance: none;
}

.switch2 .switch2_t .el-input__suffix {
  position: absolute;
  height: 24px;
  right: -2px;
  top: 8px;
  text-align: center;
  color: #C0C4CC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}

.switch2-body {
  margin: 3% 7% auto 7%;
  width: 86%;
  /* display: flex; */
  /* 水平居中 */
  /* -webkit-flex-direction: column-reverse; */
  /* flex-direction: column-reverse; */
  /* justify-content: center; */
  /* align-items:center; */
  height: auto;
}

.switch2-body-m {
  font-size: 12px;
  text-align: left;
}

.switch2-body-m img {
  width: 100%;

}


@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    /*初始状态 透明度为0*/
  }

  50% {
    opacity: 0;
    /*中间状态 透明度为0*/
  }

  100% {
    opacity: 1;
    /*结尾状态 透明度为1*/
  }
}

.header .header_cenner {
  width: 28%;
  float: left;
  line-height: 62px;
  text-align: center;
  margin-left: 17%;
}


.header .header_cenner span {
  color: #ffffff;
  font-weight: bold;
  font-size: 42px;
  letter-spacing: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  position: relative;
}

.header .header_cenner img {
  position: absolute;
  top: 5px;
  left: 36%;
  width: 45px;
  height: 45px;
}

.header .header_data {
  width: 16%;
  line-height: 40px;
  float: left;
  text-align: left;
  margin-top: 32px;
  margin-left: 70px;
  font-size: 14px;
}

.header .header_data span {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}

.header .header_right {
  position: absolute;
  width: 4%;
  margin-left: 90%;
  margin-top: 40px;

  font-size: 14px;
  color: #fff;

}

.header .header_right3 {
  position: absolute;
  width: 6%;
  margin-left: 74%;
  margin-top: 40px;
  font-size: 14px;
  color: #fff;


}

.header .header_right4 {
  position: relative;
  cursor: pointer;
  width: 6%;
  margin-left: 82%;
  margin-top: 40px;
  font-size: 14px;
  color: #fff;

}

.header .header_right1 {
  position: absolute;
  display: inline-block;
  width: 1.5%;
  margin-left: 32%;
  margin-top: 20px;
  top: 12px;
  cursor: pointer;
  /*鼠标变小手*/
}

.content_map {
  width: 100%;
  height: calc(100% - 62px);
  position: absolute;
}

.content_map .map {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}


/* 整个滚动条 */
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 6px;
  /* 对应横向滚动条的宽度 */
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #87c7f1;
  /* border-radius: 32px; */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  /* border-radius: 32px; */
}

@media (max-width: 1729px) {
  .header .header_cenner img {
    position: absolute;
    top: 4px;
    left: 35%;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1554px) {
  .header .header_cenner img {
    position: absolute;
    top: 4px;
    left: 36%;
    width: 40px;
    height: 40px;
  }

  .header .header_cenner span {
    color: #ffffff;
    font-weight: bold;
    font-size: 38px;
    letter-spacing: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    position: relative;
  }
}

@media (max-width: 1300px) {
  .header .header_cenner img {
    position: absolute;
    top: 4px;
    left: 35%;
    width: 40px;
    height: 40px;
  }
}</style>
